//定义全局主题&颜色的map数组，鉴于V5只有白天和晚上的主题，此处仅定义这两种
//切记 所有颜色一式两份儿，务必保证key值统一，key值可以自定义，注意避免$%_之类的，
//与sass自有符号冲突，见文知意即可
//另外如果基于其他UI框架，如本项目基于element-ui，则只需设置一套dark主题，
//data-theme为dark时，样式引用dark
//data-theme为其他值时，自然就采用了elementui的默认样式
$themes: (light: (font_color1: #000, //字体颜色1
        font_color2: #8590a6,//字体颜色2
        background_color1: #fff, //背景颜色1
        background_color2: #e7eaee, //背景颜色2
        background_color3: #fff), //背景颜色3
    dark: (font_color1: #fff, //字体颜色1
        font_color2: #859091,//字体颜色2
        background_color1: #282c35, //背景颜色1
        background_color2: #282c35, //背景颜色2
        background_color3: #363c48)); //背景颜色3

//遍历主题map
@mixin themeify {

    @each $theme-name,
    $theme-map in $themes {
        //!global 把局部变量强升为全局变量
        $theme-map: $theme-map !global;

        //这步是判断html的data-theme的属性值  #{}是sass的插值表达式
        //& sass嵌套里的父容器标识   @content是混合器插槽，像vue的slot
        [data-theme="#{$theme-name}"] & {
            @content;
        }
    }
}

//声明一个根据Key获取颜色的function
@function themed($key) {
    @return map-get($theme-map, $key);
}

//暂时想到的常用的开发场景下面三种背景颜色、字体颜色、边框颜色  至于阴影什么之类的忽略了
//获取背景颜色
@mixin background_color($color) {
    @include themeify {
        background-color: themed($color);
    }
}

//获取字体颜色
@mixin font_color($color) {
    @include themeify {
        color: themed($color);
    }
}

//获取边框颜色
@mixin border_color($color) {
    @include themeify {
        border-color: themed($color);
    }
}